<template>
  <div >
    <div class="v_d_h">
       <div
        class="v_d_im"
        :data-original="data.content.img"
        :style="{
          backgroundImage: 'url(' + data.content.img + ')',
          backgroundSize: 'cover',
          width: '220px',
          height: '330px',
        }" 
      >

        <div class="v_d_pl" ></div>
      </div>  
      <div class="v_d_dr">
        <p>
          <h3>{{data.content.name}}</h3>
        </p>
        <p v-if="data.content.score">
          评分：{{data.content.score}}
        </p>
        <p >
          <span v-if="data.content.type">分类：{{data.content.type}}</span>
          <span v-if="data.content.host">地区：{{ data.content.host }}</span>
          <span v-if="data.content.host">上映时间：{{ data.content.time }}</span>
        </p>
        <p>
          <span v-if="data.content.type">更新：{{data.content.update}}</span>
        </p>
        <p>
          <span v-if="data.content.type">主演：{{data.content.actors}}</span>
        </p>
        <p>
          <span v-if="data.content.type">导演：{{data.content.director}}</span>
        </p>
        <p>
          <span v-if="data.content.desc">简介：{{data.content.desc}}</span>
        </p>
        <div class="content_play"><el-button @click="play">播放</el-button></div>
      </div>
    </div>
    <div class="play_xs" >
      <span>播放地址</span>
      <div>
      <el-tabs
        v-model="activeName"
        class="pl_ad_list"
        @tab-click="handleClick"
      >
      <template v-for="(item ,num) in data.playList "> 
        <el-tab-pane  :label="item.name" :name="num">
          <template v-for ="lt in item.list">
              <el-button @click="openPlay(lt)" >{{ lt.name }}</el-button>
          </template>
        </el-tab-pane>
      </template>

      </el-tabs>
    </div>
    </div>
    <!-- <div class="play_sm" >
      推荐
    </div> -->

    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <VideoPlay ></VideoPlay>
    </yu-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import VideoPlay from './VideoPlay.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
let { proxy } = getCurrentInstance();
const activeName = ref(0);//默认选择第一个播放地址第一集
const data = reactive({
  dialogConfig:{},
  isShow: false,
  playList:[
  {name: '无尽高速',list:[{name:'第一集',url: 'http://'},{name:'第二集',url: 'http://'},{name:'第三集',url: 'http://'}]},
  {name: '百度高清',list:[{name:'第四集',url: 'http://'},{name:'第五集',url: 'http://'},{name:'第六集',url: 'http://'}]},
],
  content: {
    name: '冰属性男子与酷酷女同事酷酷女同事',//电影名称
    img: 'https://sakura.xonlines.com/upload/vod/20230117-1/f651442adc9db74d02d1242b0d1f4be6.jpg',//电影图片
    url: 'http://www.dm88.me/view/10149.html',//电影明细页面链接
    score: 90,//电影评分
    type:'日本动漫',//电影分类
    host:'日本',//地区
    time: '2019',//电影上映时间
    update: '2021-01-17',//更新时间
    actors:'主演',//主演
    director: '导演',//导演
    desc: '简介',//简介
    play: 'https://jianghu.live2008.com/xin/?url=https://new.qqaku.com/20230118/Gq5tMtFO/index.m3u8',
    duration:'10',//时长
  },
});
onMounted(() => {
  data.detail = router.currentRoute.value.query;
});
const play = ()=>{
  data.isShow = true;
  data.dialogConfig.title = data.content.name;
};
const openPlay = (lt)=>{

  data.isShow = true;
  data.dialogConfig.title = data.content.name +'_'+ lt.name;
};



</script>

<style lang="scss" scoped>

  // 
  .v_d_h {
    width: 100%;
    .v_d_im {
      cursor: pointer;
      width: 220px;
      height:330px;
      background-color: aqua;
      overflow:visible;
      position: absolute;
    }
    .v_d_pl {
      background-position: center center;
      width: 100%;
      height: 100%;
    }
    .v_d_im:hover {
      filter: alpha(Opacity=80);
      -moz-opacity: 0.5;
      opacity: 0.8;
      .v_d_pl {
        background: url('@/assets/img/play.png') no-repeat;
        background-position: center center;
      }
    }
    .v_d_dr{
      height: 330px;
      padding-left: 230px;
      width: calc(100% - 220px);

  }
  }

  .play_xs{
    padding-top: 20px;
    width: 100%;
    height: 20px;
  }
  .pl_ad_list{
    width: 100%;
    height:50px;
    min-height: 50px;
    max-height: 300px;
    overflow:visible;
  }
</style>
